<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品展示</title>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<style>
			.products {
				width: 1226px;
				margin: 0 auto;
				background-color: coral;
			}
			.product_class  {
				width: 226px;
				float: left;
				margin-right: 20px;
			}
			.product_class li{
				border-bottom: 1px solid gainsboro;
				font-size: 16px;
				text-align: center;
				line-height: 60px;
				cursor: pointer;
			}
			.product_class li p{
				line-height: 50px;
				margin: 5px 0;
			}
			.product_class li:hover p{
				font-size: 18px;
				border-left: 6px solid #96d610;
			}
			.product_items {
				float: left;
				width: 979px;
				/*height: 800px;*/
				border-left: 1px solid gainsboro;
			}
			.product_items li {
				margin: 50px 0px 100px 50px;
				position: relative;
			}
			.product_items li img{
				width: 30%;
				border: 1px solid gainsboro;
			}
		
			.product_items li .product_items_content {
				width: 500px;
				float: right;
				margin-right: 50px;
				/*background-color: orange;*/
			}
			.product_items_content p:first-of-type {
				line-height: 36px;
			}
			/*.apply*/
			.apply span{
				display: inline-block;
			}
			.apply span:first-child{
				width: 70px;
				float: left;
			}
			.apply span:last-child{
				width: 420px;
			}
			.product_items_content p:last-child{
				/*margin-top: 50px;*/
				position: absolute;
				bottom: 5px;
				padding: 8px 40px;
				background-color: #96d610;
				color: white;
				border-radius: 20px;
				cursor: pointer;
			}
			.product_items a{
				color: #000;
			}
		</style>
	</head>
	<body ng-app="">
		<div ng-include="'header.html'"></div>
		
		<div class="products">
			<ul class="product_class">
				<li><p>手部训练器</p></li>
				<li><p>手臂训练器</p></li>
				<li><p>腿部训练器</p></li>
			</ul>
			<ul class="product_items">
				<li>
					<a href="productDisplay.html">
						<img src="img/product2.png" alt="" />
					<!--<div class="product_items_img"><img src="img/product2.png" alt="" /></div>-->
					<div class="product_items_content">
						<p>名称：Handtutor</p>
						<p class="apply"><span>适用症：</span><span>肢体平衡障碍、运动控制障碍、精细运动不良、本体感觉失调、肌肉无力、废用型失用症、节律性失调肢体平衡障碍、运动控制障碍、精细运动不良、本体感觉失调、肌肉无力、废用型失用症、节律性失调</span></p>
						<p>预约试用</p>
					</div>
					</a>
				</li>
				<li>
					<img src="img/product2.png" alt="" />
					<!--<div class="product_items_img"><img src="img/product2.png" alt="" /></div>-->
					<div class="product_items_content">
						<p>名称：Handtutor</p>
						<p class="apply"><span>适用症：</span><span>肢体平衡障碍、运动控制障碍、精细运动不良、本体感觉失调、肌肉无力、废用型失用症、节律性失调</span></p>
						<p>预约试用</p>
					</div>
				</li>
				<li>
					<img src="img/product2.png" alt="" />
					<!--<div class="product_items_img"><img src="img/product2.png" alt="" /></div>-->
					<div class="product_items_content">
						<p>名称：Handtutor</p>
						<p class="apply"><span>适用症：</span><span>肢体平衡障碍、运动控制障碍、精细运动不良、本体感觉失调、肌肉无力、废用型失用症、节律性失调</span></p>
						<p>预约试用</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</html>
